<template>
	<el-progress class="pb-wrap" :text-inside="true" :stroke-width="26" 
        :percentage="setItemProgress(progressData)" 
        v-if="!isNaN(parseInt((progressData.storageUsage/progressData.storageCapacity)*100))"
        
        :format="setItemText(progressData)">
    </el-progress>
    <!-- :status="setItemStatus(progressData)"  -->
</template>
 
<script>
export default {
    props: {
        progressData: {
            type: Object,
            default () {
                return {
                    storageUsage: 0,
                    storageCapacity: 0
                }
            }
        }
    },
    methods: {
        setItemProgress(data) {
            if (data.storageUsage >= data.storageCapacity) {
                return 100
            } else {
                return (data.storageUsage / data.storageCapacity)* 100
            }
        },
        setItemText(progressData) {
            return () => {
                return this.$t('已用')+this.getSizeStr(progressData.storageUsage)+'/'+this.$t('总共')+this.getSizeStr(progressData.storageCapacity); 
                // return '已用52.8 MB/总共6.5 GB'
            }
        },
        getSizeStr(data){ 
            var size = "";  
            if( data < 1 ){ //如果小于1KB转化成B  
                size = data*1024 + "B";    
            }else if(data < 1024 ){//如果小于0.1MB转化成KB  
                size = data + "KB";              
            }else if(data < 1024 * 1024 ){ //如果小于0.1GB转化成MB  
                size = (data / 1024).toFixed(2) + "MB";  
            }else{ //其他转化成GB  
                size = (data / (1024 * 1024)).toFixed(2) + "GB";  
            }  
            
            var sizestr = size + "";   
            var len = sizestr.indexOf("\.");  
            var dec = sizestr.substr(len + 1, 2);  
            if(dec == "00"){//当小数点后为00时 去掉小数部分  
                return sizestr.substring(0,len) + sizestr.substr(len + 3,2);  
            } 
            return sizestr;
        },
        setItemStatus(data) {
            if (data.storageUsage > data.storageCapacity) {
                return 'exception'
            } else if (data.storageUsage === data.storageCapacity) {
                return 'success'
            } else {
                return 'warning'
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.pb-wrap {
    ::v-deep .el-progress-bar__innerText {
        color: #000;
    }
}   
</style>